<template>
	<div class="mt-30px mb-30px relative flex justify-center">
		<div class="absolute top-0 left-0px flex items-center cursor-pointer" @click="back">
			<div class="mr-6px">
				<el-icon>
					<ArrowLeftBold />
				</el-icon>
			</div>
			<p>返回</p>
		</div>

		<!-- 页面内容 -->
		<div class="w-40% flex flex-col">
			<p class="text-#000000 text-18px font-bold mb-40px">请选择一种收款方式</p>
			<p class="text-#000000 text-14px mb-50px">
				<span class="text-#F34E5F">*</span>
				请确保添加您的银行卡号进行及时支付。请勿包含其他银行或付款方式的详细信息。
				您必须添加所选银行的付款/收款信息
			</p>
			<div class="flex items-center justify-between mb-160px">
				<div v-for="(item, index) in list" :key="index" class="flex items-center w-25% p-20px border-1px border-solid rounded-10px border-#E5E6EB cursor-pointer" :style="{ borderColor: selected === item.name ? '#114CEE' : ''}"
				@click="selected = item.name">
					<img :src="item.icon" class="mr-20px"/>
					<p>{{ item.name }}</p>
				</div>
			</div>
			<div>
				<el-button type="primary" color="#114CEE" style="width:100%;height:50px;font-size:18px;"
				@click="addDialogShow = true"> 继续 </el-button>
			</div>
		</div>
		<AddDialog :show="addDialogShow" :name="selected" @close="closeAddDialog"/>
	</div>
</template>
<script lang='ts' setup>
import AddDialog from './components/AddDialog.vue';
import useJump from '@/utils/jump';
const { back } = useJump()
const list = ref<any[]>([
	{
		icon: '/transaction/c2c/c2cPersonal/addPay/bank.svg',
		name: '银行卡'
	},
	{
		icon: '/transaction/c2c/c2cPersonal/addPay/zhifubao.svg',
		name: '支付宝'
	},
	{
		icon: '/transaction/c2c/c2cPersonal/addPay/wechat.svg',
		name: '微信'
	}
])

const selected = ref<any>('银行卡');

// 控制添加框显示
const addDialogShow = ref<boolean>(false);

const closeAddDialog = (val:boolean) => {
	addDialogShow.value = val;
};
</script>
